<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>全屏属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #ff9000;
        }

        /* 全屏状态下的元素自身 宽高/位置属性是定死的 */
        .box:fullscreen {
            background-color: #0ff;
        }

        .box:-webkit-full-screen {
            background-color: #f0f;
        }

        .box:fullscreen .inner {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner"></div>
    </div>

    <script type="text/javascript">
        var box = document.querySelector(".box");

        box.onclick = function () {
            // 判断当前是否是全屏  判断和退出全屏使用的document
            if (ifFullscreen()) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
            } else {
                // 让box元素全屏
                if (box.requestFullscreen) {
                    box.requestFullscreen();
                } else if (box.webkitRequestFullscreen) {
                    box.webkitRequestFullscreen();
                } else if (box.mozRequestFullscreen) {
                    box.mozRequestFullscreen();
                } else {
                    alert("sorry,无法全屏");
                }
            }
        }

        function ifFullscreen() {
            return document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || false;
        }
    </script>
</body>

</html>